<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    #box {
        /* width: 400px;
        height: 200px; */
        background-color: #BFFB8F;
        border: solid 1px blue;
        display: none;
    }

    .p {
        width: 400px;
        height: 200px;
        background-color: #BFFB8F;
        border: solid 1px blue;
    }
</style>



<body>
    <div id="box"></div>
    <p id="p">fdfd</p>
    <script>
        window.onload = function () {
            var box = document.getElementById("box");
            console.log(document.styleSheets[0].rules[0].style);
            document.styleSheets[0].rules[0].style.display = true;
            // var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;  //判断浏览器类型
            // box.innerHTML = "<h3>盒子样式</h3>"
            // box.innerHTML += "<br>边框：" + cssRules[0].style.border;  //读取cssRules的border属性
            // box.innerHTML += "<br>背景：" + cssRules[0].style.backgroundColor;  //读取cssRules的background-color属性
            // box.innerHTML += "<br>高度：" + cssRules[0].style.height;  //读取cssRules的height属性
            // box.innerHTML += "<br>宽度：" + cssRules[0].style.width;  //读取cssRules的width属性
            console.log(document.styleSheets[0].rules[0].style.display);
        }
    </script>

</body>

</html>